<template>
  <view>
    <nut-searchbar v-model="searchValue" placeholder="请输入姓名/企业名" @update:model-value="initList(false)">
      <template v-slot:rightin>
        <Search2 />
      </template>
    </nut-searchbar>
    <view class="main1">
      <view class="item" v-for="(item, index) in list" :key="index" @click="chooseItem(item)">
        <view class="persionItem" v-if="item.headType == '1'">
          <view class="persionTop">
            <view style="display: flex">
              <view class="persionHead">
                <image
                  src="../../assets/images/invoicing/user1.png"
                  class="perision_img"
                />
              </view>
              <p>{{ item.headTile }}</p>
            </view>
            <view class="invoicing_persion_Title"> 普票抬头-个人 </view>
          </view>
          <view class="persionBot">
            <!-- <nut-radio label="1" v-model="choosed">设为默认抬头</nut-radio> -->
            <nut-checkbox
              v-model="item.default"
              label="1"
              @click.stop="chooseDefault(item)"
              >设为默认抬头</nut-checkbox
            >
            <view class="operateBox">
              <view
                @click.stop="editItem(item)"
                style="margin-right: 60rpx"
              >
                <image class="img" src="../../assets/images/index/icon_edit.png"></image>
                <text>编辑</text>
              </view>
              <view @click.stop="deleteItem(item)"
                >
                <image class="img" src="../../assets/images/index/icon_delete.png"></image>
                <text>删除</text>
                </view>
            </view>
          </view>
        </view>
        <view class="enterpriseItem" v-else>
          <view class="persionTop">
            <view style="display: flex">
              <view class="persionHead">
                <image
                  src="../../assets/images/invoicing/user1.png"
                  class="perision_img"
                />
              </view>
              <p>{{ item.headTile }}</p>
            </view>
            <view class="invoicing_enterprise_Title"> 普票抬头-企业 </view>
          </view>
          <view class="persionMid">
            <view class="midItem"
              ><view class="midTitle">税号</view
              ><view>{{ item.taxNumber }}</view>
            </view>
            <view class="midItem"
              ><view class="midTitle">开户银行</view
              ><view>{{ item.account }}</view>
            </view>
            <view class="midItem"
              ><view class="midTitle">银行账户</view
              ><view>{{ item.accountNo }}</view>
            </view>
            <view class="midItem"
              ><view class="midTitle">企业地址</view
              ><view>{{ item.accountAdd }}</view>
            </view>
            <view class="midItem"
              ><view class="midTitle">企业电话</view
              ><view>{{ item.phone }}</view>
            </view>
          </view>
          <view class="persionBot">
            <!-- <nut-radio label="1" v-model="choosed">设为默认抬头</nut-radio> -->
            <nut-checkbox
              v-model="item.default"
              label="1"
              @click.stop="chooseDefault(item)"
              >设为默认抬头</nut-checkbox
            >
            <view class="operateBox">
              <view
                @click.stop="editItem(item)"
                style="margin-right: 60rpx"
              >
                <image class="img" src="../../assets/images/index/icon_edit.png"></image>
                <text>编辑</text>
              </view>
              <view @click.stop="deleteItem(item)"
                >
                <image class="img" src="../../assets/images/index/icon_delete.png"></image>
                <text>删除</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view v-if="list.length===0" class="container_empty">
        <image mode="aspectFit" src="../../assets/images/index/empty3.png"></image>
        <view class="empty_text">暂无信息</view>
      </view>
    </view>
    <!-- 底部 -->
    <view class="bottomBox1">
      <view class="botBtn" @click="gotoAddOrdinary">新增普票抬头</view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { computed, onMounted, ref, watch } from "vue";
import { Search2, Del2, Edit } from "@nutui/icons-vue-taro";
import { $get, $post, $del } from "@/@api/index";
import useUserInfoStore from "../../store/user";
import useInvoicingStore from "../../store/invoicing";
import Taro, {useRouter} from "@tarojs/taro";
const userStore = useUserInfoStore();
const invoicingStore = useInvoicingStore();

const searchValue = ref<string>('');
const choosed = ref<boolean>(false);
const list = ref<any>([]);
//初始化
initList(false);
//删除抬头
function deleteItem(item: any) {
  Taro.showModal({
    title: '提示',
    content: '确认删除该条目？',
    success: async(r)=>{
      if(r.confirm){
        $del("/selfmachine-system/invoice/delete", {
          btihId: item.btihId,
        }).then((res: any) => {
          if (res.data.code == 200) {
            Taro.showToast({
              icon: "success",
              title: "删除成功",
            });
            initList(true);
          } else {
            Taro.showToast({
              icon: "error",
              title: "删除失败",
            });
          }
        });
      }
    }
  })
}
//初始化方法
function initList(clear:boolean) {
  if(clear){
    searchValue.value = ''
  }
  $get("/selfmachine-system/invoice/list", {
    customerCode: userStore.userInfo.customerCode,
    pageNum: 1,
    pageSize: 10,
  }).then((res: any) => {
    if (res.data.code == 200) {
      list.value = [];
      res.data.rows.forEach((aa: any) => {
        if (aa.billType == "1" && aa.headTile.indexOf(searchValue.value)!==-1) {
          list.value.push(aa);
        }
      });
      list.value.forEach((aa: any) => {
        if (aa.isDefault == "1") {
          aa.default = true;
        } else {
          aa.default = false;
        }
      });
      console.log(list.value, "list");
    }
  });
}
//跳转到编辑
function editItem(item: any) {
  invoicingStore.editTitle = item;
  Taro.navigateTo({
    url: "/pages/invoicing/addOrdinary",
  });
}
//设为默认
function chooseDefault(item: any) {
  $post("/selfmachine-system/invoice/setDefault", {
    customerCode: userStore.userInfo.customerCode,
    btihId: item.btihId,
  }).then((res: any) => {
    if (res.data.code == 200) {
      initList(false);
    }
  });
}

function gotoAddOrdinary() {
  invoicingStore.editTitle = "";
  Taro.navigateTo({
    url: "/pages/invoicing/addOrdinary",
  });
}
const chooseItem = (item:any)=>{
  if(useRouter().params.billType){
    let pages = Taro.getCurrentPages()
    let prevPage = pages[pages.length - 2]
    prevPage.setData({info:item})
    Taro.navigateBack()
  }
}
</script>
<style lang="scss">
.main1 {
  height: calc(100vh - 346rpx);
  overflow: auto;
  background: #f5f5f5;
  box-sizing: border-box;
  padding: 0 24rpx;
  padding-top: 1rpx !important;
  .persionItem {
    margin-top: 24rpx;
    height: 208rpx;
    width: 100%;
    background: linear-gradient(107deg, #cce0ff 0%, #ffffff 99%);
    border-radius: 16rpx;
    overflow: hidden;
    .persionTop {
      display: flex;
      justify-content: space-between;
      height: 128rpx;
      box-sizing: border-box;
      padding: 40rpx;
      .invoicing_persion_Title {
        width: 168rpx;
        height: 36rpx;
        border-radius: 20rpx;
        color: #0966ff;
        font-size: 22rpx;
        line-height: 36rpx;
        text-align: center;
        background: rgba(9, 102, 255, 0.16);
      }
      .persionHead {
        width: 64rpx;
        height: 64rpx;
        border-radius: 16rpx;
        background: #ffffff;
        box-sizing: border-box;
        padding: 8rpx;
        .perision_img {
          height: 100%;
          width: 100%;
        }
      }
      p {
        font-size: 32rpx;
        line-height: 48rpx;
        margin-left: 16rpx;
      }
    }
    .persionBot {
      display: flex;
      justify-content: space-between;
      height: 80rpx;
      background: #ffffff;
      padding: 0 20rpx;
      .operateBox {
        color: #666666;
        line-height: 80rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        view {
          display: flex;
          align-items: center;
          .botIcon {
            margin-top: 20rpx;
          }
          .img {
            width: 32rpx;
            height: 32rpx;
          }
          text {
            margin-left: 12rpx;
            font-size: 24rpx;
          }
        }
      }
    }
  }
  .enterpriseItem {
    margin-top: 24rpx;
    height: 412rpx;
    width: 100%;
    background: linear-gradient(107deg, #cce0ff 0%, #ffffff 99%);
    border-radius: 16rpx;
    .persionTop {
      display: flex;
      justify-content: space-between;
      height: 128rpx;
      box-sizing: border-box;
      padding: 40rpx;
      .invoicing_enterprise_Title {
        width: 168rpx;
        height: 36rpx;
        border-radius: 20rpx;
        color: #0ec365;
        font-size: 22rpx;
        line-height: 36rpx;
        text-align: center;
        background: rgba(9, 102, 255, 0.16);
      }
      .persionHead {
        width: 64rpx;
        height: 64rpx;
        border-radius: 16rpx;
        background: #ffffff;
        box-sizing: border-box;
        padding: 8rpx;
        .perision_img {
          height: 100%;
          width: 100%;
        }
      }
      p {
        width: 300rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 32rpx;
        line-height: 48rpx;
        margin-left: 16rpx;
      }
    }
    .persionMid {
      height: 204rpx;
      .midItem {
        height: 36rpx;
        display: flex;
        font-size: 22rpx;
        line-height: 36rpx;
        color: #666666;
        box-sizing: border-box;
        padding-left: 112rpx;
        .midTitle {
          width: 120rpx;
        }
      }
    }
    .persionBot {
      display: flex;
      justify-content: space-between;
      height: 80rpx;
      background: #ffffff;
      padding: 0 20rpx;
      .operateBox {
        color: #666666;
        line-height: 80rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        view {
          display: flex;
          align-items: center;
          .botIcon {
            margin-top: 20rpx;
          }
          .img {
            width: 32rpx;
            height: 32rpx;
          }
          text {
            margin-left: 12rpx;
            font-size: 24rpx;
          }
        }
      }
    }
  }
}
.bottomBox1 {
  background: #fff;
  position: fixed;
  bottom: 0;
  height: 128rpx;
  width: 750rpx;
  border-top: 1rpx solid #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2500;
  .botBtn {
    width: 700rpx;
    height: 88rpx;
    border-radius: 44rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #0966ff;
    color: #fff;
    font-size: 32rpx;
  }
}
.container_empty {
  width: 80%;
  margin: 280rpx auto;
  text-align: center;

  image {
    width: 300rpx;
    height: 300rpx;
  }
  .empty_text {
    font-size: 32rpx;
    color: #999;
  }
}
</style>
